<template>
  <view class="topup">
    <view class="top">
      <uv-input
        placeholder="请输入充值金额"
        prefixIcon="red-packet"
        prefixIconStyle="font-size: 22px;color: #909399;"
        style="height:40px;border:none;"
      ></uv-input>
    </view>
    <view class="content">
      <view class="content1">支付方式</view>
      <view class="content2">
        <uv-button text="微信钱包" icon="weixin-fill" style="width:45%"></uv-button>
        <uv-button text="支付宝" icon="zhifubao-circle-fill" style="width:45%"></uv-button>
      </view>
    </view>
    <view class="bottom">
      <uv-button text="充值" color="#FC4424" shape="circle"></uv-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss">
.topup {
  background-color: #f5f5f5;
  height: 93vh;
  padding-top:15px;
  .top{
    width:90%;
    margin:auto;
    background-color: #fff;
    margin-bottom:15px;
  }
  .content{
    padding:0 0 20px 0;
    width:90%;
    margin:auto;
    background-color: #fff;
    border-radius: 10px;
    margin-bottom:30px;
    .content1{
      padding:10px;
      font-weight: bold;
      font-size: 15px;
    }
    .content2{ 
      display: flex;   
      justify-content: space-around;
    }
  }
  .bottom{
    width:90%;
    margin:auto;
  }
}
</style>
